<template>
  <div>
    <TablePart :table="table" height="3rem"></TablePart>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>

<script>
import TablePart from "./TablePart";
import { IViewTable } from "_i";
import { Get } from "../api";
let that = {};
export default {
  name: "ProblemListPart",
  components: { TablePart },
  props: {
    filterAnd: {
      //过滤条件与
      type: Array,
      default: () => []
    },
    filterOr: {
      //过滤条件或
      type: Array,
      default: () => []
    },
    orderBy: {
      //排序规则
      type: Object,
      default: () => ({
        field: "problem_id",
        mode: "ASC"
      })
    },
    page: {
      type: Object,
      default: () => ({
        page_num: 1, //页码
        page_size: 10, //页的大小
        page_total: 10 //总页数
      })
    },
    funs: {
      type: Object
    }
  },
  data() {
    return {
      table: new IViewTable(
        [
          {
            title: "#",
            key: "problem_id",
            width: 20
          },
          {
            title: "类型",
            key: "problem_type",
            type: "enum",
            enum: {
              problem_select: "选择",
              problem_gap: "填空",
              problem_prog: "编程"
            }, //problem_select、problem_gap、problem_prog
            width: 20
          },
          {
            title: "题目",
            key: "title",
            align: "left",
            type: "link",
            onClick: e => {
              this.$router.push({ name: "ProblemContent" , params:e});
            }
          },
          {
            title: "标签",
            key: "tag",
            type: "tag",
            defaultColor: "#ddd",
            colors: { 简单: "success", 算法: "black" },
            width: 30
          },
          {
            title: "来源",
            key: "source",
            width: 30
          },
          {
            title: "正确",
            key: "accepted",
            width: 20
          },
          {
            title: "提交",
            key: "submit",
            width: 20
          }
        ],
        []
      ),
      spinShow: false
    };
  },
  methods: {
    async update() {//更新函数
      this.spinShow = true;
      let { filterAnd, filterOr, orderBy, page } = this.$props;
      let res = await Get.getProblemList({
        filterAnd,
        filterOr,
        orderBy,
        ...page
      });
      // console.log(res);
      this.page.page_total = res.page_total;
      this.table.data = res.data;
      this.spinShow = false;
    }
  },
  async created() {
    that = this;
    this.funs.update = () => {
      this.update();
    };
  }
};
</script>

<style lang="less" scoped>
</style>